AWS SDK for JavaScript in the Browser用のSDK Builderができました！

せーの

2015.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、せーのです。今日はフロントエンド開発者だけどAWSの事はよくわからない、という方がごく簡単にAWSのリソースを使えるようになる、使い勝手の良さそうなビルダーをご紹介します。こちらを使うとブラウザ上のGUI操作だけでhtmlファイル内に必要なSDKをカスタマイズで作ってくれます。

SDK Builderの使い方

例えばあなたがWebフォーラムのサイトを作っていたとして、情報やアップロードした画像を一旦S3にためておきたいとします。そうすると必要になるのはAWSへの認証としてAmazon Cognito、保存操作のためにAmazon S3のクライアントライブラリが必要となります。これが人気が出てきたらどうなるでしょう？ファイル管理だけでは収まらないのでDynamoDBにデータを格納したくなります。当然DynamoDBのクライアントライブラリをインクルードする必要がありますね。思い切ってチャット化したいとしたら？Kinesisのクライアントライブラリを入れてストリームさせるのがいいでしょう。さて、これらのライブラリを個別にインクルードするのはファイル管理の観点からも大変ですね。かと言ってAWS SDKをまるごとダウンロードして組み込むと容量としては冗長になりますし、個別のサービスがアップデートした時に管理が大変になります。

そこでこのSDK Builderを使うと、システム作成に必要なサービスだけをカスタマイズしたライブラリファイルをビルドしてくれるわけです。これは便利ですね！

やってみた

それでは早速やってみましょう。SDK BuilderはWebアプリなのでURLにアクセスします。

AWSらしい痒い所に手が届く仕様になっています。いくつかご紹介します。

バージョンが選択できる

AWSはとてもアップデートのサイクルの早いサービスなので、どのサービスがどのバージョンなのかというのは非常に重要なポイントになります。 [choose a core version]でどのバージョンを使用するのかきっちり確認しましょう。また各サービスのバージョンも選択可能ですので「このサービスの最新SDKが使いたい。他のサービスはそのままで」という時には各サービスのバージョン選択オプションを使ってバージョンを固定しましょう。

めんどくさい時には全選び

どのサービスSDKを使うのかまだきちっと決まっていない、というようなふわっとした状態の時はとりあえずこのボタンで使いそうなサービスを落としておきましょう。[select default services]でCORSに対応しているコアサービスのSDKが、[Select All Services]で全てのサービスのSDKが含まれます。[Clear All]は選択したサービスをクリアする時に使いましょう。

選択内容を確認

[Build Configuration]に選択したサービスが一覧で表示されます。横に[-]ボタンがありますので、要らない時はこのボタンで一覧から消去しましょう。

基本はminimizeで

最後に改行やスペースを省いた[Minimize]かデバッグ用の[Development]かが選択できます。ですがDevelopmentの変数も特に意味のある単語ではなく[t][m]などですし、chromeのDeveloper Toolsを使えばデバッグ時のインデントもやってくれますので特に理由が無ければ[Minimize]で良いかと思います。

これらを元に必要なサービスを選んでカスタムビルドしてみましょう。私は今回[CognitoIdentity]と[S3]を選んでみました。

確かに小さい！

ダウンロードしたSDKをAWS SDK for JavaScript in the BrowserのJSファイルとくらべてみました。

なんと半分以下！確かにこれは小さいですね。

使ってみた

このSDKを使って簡単な画像アップロードのHTMLファイルを作ってみました。

<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<script src="js/aws-sdk-2.1.36.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="content">
  <div class="content-head">画像アップロードサンプル</div>
</div>
<form method="post" action="#" class="pure-form pure-form-aligned">
<div>
<input type="file" id="file-chooser" accept="image/*">
</div>
<div>
<input type="button" id="submit"  class="pure-button pure-button-primary" value="送信">
</div>
</form>
</body>
</html>

var file;
$(function(){
AWS.config.region = "us-east-1";
  AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      AccountId: "123456789012",
      RoleArn: "arn:aws:iam::123456789012:role/Cognito_testchao2sukeusUnauth_Role",
      IdentityPoolId: 'us-east-1:40bff102-c6ee-4dfc-bcba-bd473149af87',
  });
  
  //バケット名
  var s3BucketName = 'testchao2sukeus';
  //リージョン
  var s3RegionName = 'us-east-1';

  $("#submit").on('click', function(){

    //入力値取得
    file = $("#file-chooser")[0].files[0];

    if (!file) {
      alert("ファイルを選択して下さい。");
      return false;
    }
    
    sendImage();
    alert('データが送信されます。');
    return false;
  });
  
//画像のアップロード
  function sendImage() {
      var s3 = new AWS.S3({params: {Bucket: s3BucketName, Region: s3RegionName}});

      var params = {file.name, ContentType: file.type, Body: file};

      s3.putObject(params, function (err, data) {
        if (err){
          console.log(logs + "error occured about file uploading to s3. - " + err);
        } else {
          console.log(logs + "file uploaded to s3. - ");
        }
      });
  }


});

CognitoにてUnauthenticated identitiesを許可し、PoolIDやArnを書き込みます。セキュリティ的にまずいのでAPI KeyやSecret KeyをJSファイルには書かないようにしましょう。 S3に送信先のバケットを作成したら画面からファイルをアップロードしてみましょう。